<!doctype html>
<html>
<head>
<meta charset="utf-8">
<TITLE>论坛--登录</TITLE>
<Link rel="stylesheet" type="text/css" href="style/style.css"/>
<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</HEAD>

<BODY>
<DIV>
	<IMG src="image/logo.gif">
</DIV>
<!--      用户信息、登录、注册        -->

	<DIV class="h">
		您尚未　<a href="login.jsp">登录</a>
		&nbsp;| &nbsp; <A href="reg.jsp">注册</A> |
	</DIV>


<BR/>
<!--      导航        -->
<DIV>
	&gt;&gt;<B><a href="index.jsp">论坛首页</a></B>
</DIV>
<div id="app">	
	<!--      用户登录表单        -->
	<DIV class="t" style="MARGIN-TOP: 15px" align="center">
		<FORM name="loginForm" action="" method="post"
			  style="display: grid; grid-template-columns: 100px 200px auto; gap: 10px; width: 600px; padding: 10px">
			<label for="">用户名</label>
			<INPUT class="input" tabIndex="1"  type="text"      maxLength="20" size="35" v-model="uname">
			<span style="color: red; text-align: left">{{unameError}}</span>
			<label for="">密　码</label>
			<INPUT class="input" tabIndex="2"  type="password"  maxLength="20" size="40" v-model="upass">
			<span style="color: red; text-align: left">{{upassError}}</span>
			<label for=""></label>
			<div>
				<INPUT class="btn"  tabIndex="6"  type="submit" value="登 录" @click.prevent="login">
			</div>
			<span></span>
		</FORM>
	</DIV>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
        	uname:"",
        	upass:"",
			unameError:"",
			upassError:""
        },
        created() {
        	
        },
        methods : {
			login(){
        		// @click.prevent 抑制默认行为
        		let p = new URLSearchParams();
        		p.append("uname",this.uname);
        		p.append("upass",this.upass);
        		axios.post("user/login", p).then(res=>{
					this.unameError = "";
					this.upassError = "";
        			if(res.data.code == 1){
        				this.$message("登录成功！");
        			} else {
        				// this.$alert("登录失败！");
        				console.info(res.data.data);
        				res.data.data.forEach(err=>{
							if (err.field == "uname") {
								this.unameError += err.defaultMessage + "; ";
							} else if (err.field == "upass") {
								this.upassError += err.defaultMessage + "; ";
							}
						});
        			}
        		});
        	}
        }
    })
</script>
<!--      声明        -->
<BR/>
<CENTER class="gray">源辰信息</CENTER>
</BODY>
</HTML>

